<script setup lang="ts">
  import { ref } from 'vue';
  import dayjs from 'dayjs';
  import { BasicTable, useTable } from '@/components/Table';
  import { getIndexApi, getClassApi } from '@/api/account';
  import { Tag } from '@/components/InfoTag';

  const rangePresets = [
    { label: '今天', value: [dayjs(), dayjs()] },
    { label: '昨天', value: [dayjs().add(-1, 'd'), dayjs()] },
    { label: '最近7天', value: [dayjs().add(-7, 'd'), dayjs()] },
    { label: '最近14天', value: [dayjs().add(-14, 'd'), dayjs()] },
    { label: '最近30天', value: [dayjs().add(-30, 'd'), dayjs()] },
    { label: '最近90天', value: [dayjs().add(-90, 'd'), dayjs()] },
  ];

  const info = ref({
    totalAmountCategory: 0,
  });

  const [registerTable, { getRawDataSource }] = useTable({
    title: '资金明细表',
    columns: [
      {
        title: '编号',
        width: 80,
        dataIndex: 'id',
      },
      {
        title: '执行分类',
        dataIndex: 'className',
        resizable: true,
      },
      {
        title: '执行金额',
        dataIndex: 'money',
        resizable: true,
      },
      {
        title: '执行前余额',
        dataIndex: 'beforeMoney',
        resizable: true,
      },
      {
        title: '执行后余额',
        dataIndex: 'afterMoney',
        resizable: true,
      },
      {
        title: '执行说明',
        align: 'left',
        width: 400,
        resizable: true,
        dataIndex: 'remark',
      },
      {
        title: '系统单号/备注',
        dataIndex: 'orderNo',
        resizable: true,
      },
      {
        title: '操作IP',
        dataIndex: 'ip',
        resizable: true,
      },
      {
        title: '创建时间',
        dataIndex: 'create_time',
        resizable: true,
      },
    ],
    bordered: true,
    showSelectionBar: false,
    showTableSetting: true,
    accordion: true, // 手风琴效果
    api: getIndexApi,
    fetchSetting: {
      pageField: 'page',
      sizeField: 'pageSize',
      listField: 'list',
      totalField: 'total',
    },
    useSearchForm: true,
    formConfig: {
      labelWidth: 120,
      schemas: [
        {
          field: 'class',
          label: '执行分类',
          component: 'ApiSelect',
          colProps: {
            span: 6,
          },
          componentProps: {
            api: getClassApi,
            resultField: 'collectionClassification',
            labelField: 'name',
            valueField: 'id',
          },
        },
        {
          field: 'manageCategories',
          label: '财务类型',
          component: 'ApiSelect',
          colProps: {
            span: 6,
          },
          componentProps: {
            api: getClassApi,
            resultField: 'manageCategories',
            labelField: 'name',
            valueField: 'id',
          },
        },
        {
          field: 'orderNo',
          label: '系统单号',
          component: 'Input',
          colProps: {
            span: 6,
          },
        },
        {
          field: 'paymentClassification',
          label: '代付类型',
          component: 'ApiSelect',
          colProps: {
            span: 6,
          },
          componentProps: {
            api: getClassApi,
            resultField: 'paymentClassification',
            labelField: 'name',
            valueField: 'id',
          },
        },
        {
          field: 'username',
          label: '代理账号',
          component: 'Input',
          colProps: {
            span: 6,
          },
        },
        {
          field: 'crete_time',
          label: '创建时间',
          component: 'RangePicker',
          colProps: {
            span: 6,
          },
          componentProps: {
            presets: rangePresets,
          },
        },
      ],
    },
    afterFetch: () => {
      const data = getRawDataSource();
      info.value = {
        ...data,
      };
    },
    showIndexColumn: false,
  });
</script>
<template>
  <main>
    <a-row :gutter="16">
      <a-col :span="24" style="margin-top: 16px">
        <BasicTable @register="registerTable">
          <template #toolbar>
            <Tag color="red" title="筛选分类总额">
              {{ info.totalAmountCategory }}
            </Tag>
          </template>
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'create_time'">
              {{ dayjs(record.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
            </template>
          </template>
        </BasicTable>
      </a-col>
    </a-row>
  </main>
</template>
